<template>
  <el-dialog
    :title="mode == false ? '创建会议室' : '修改会议室'"
    v-model="localValue"
    width="440px"
  >
    <el-form :model="formData">
      <el-form-item label="所属校区:">
        <el-select v-model="formData.campus" placeholder="请选择">
          <el-option
            v-for="campus in campusList"
            :key="campus.id"
            :label="campus.campusName"
            :value="campus.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会议室名称:">
        <el-input v-model="formData.roomName" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="配置设施:">
        <el-input
          v-if="formData"
          v-model="formData.otherConfig"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="主座人数:">
        <el-input-number
          v-model="formData.mainSeats"
          type="number"
          size="large"
          style="width: 200px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="从座人数:">
        <el-input-number
          v-model="formData.sideSeats"
          type="number"
          size="large"
          style="width: 200px"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="saveChanges">{{
          mode == false ? '创建' : '保存'
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { UpdateRoom, AddRoom } from '@/api/index'

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    roomData: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        id: '',
        roomName: '',
        campus: '',
        isLecturehall: '',
        mainSeats: 0,
        sideSeats: 0,
        microphones: 0,
        otherConfig: '',
      },
      localValue: undefined,
      schoolValue: '',
      campuses: ['中心校区', '主校区'],
    }
  },
  watch: {
    roomData: {
      deep: true,
      handler(newVal) {
        this.formData = {
          ...newVal,
        }
        // 只在需要时打开对话框
        if (this.mode !== undefined) {
          this.localValue = true
        }
      },
    },
  },
  methods: {
    resetFormData() {
      this.formData = {
        otherConfig: '',
        mainSeats: 0,
        sideSeats: 0,
        microphones: 0,
      }
    },
    saveChanges() {
      const roomDetails = {
        id: this.formData.id,
        roomName: this.formData.roomName, // 会议室名称, 类型为String
        campus: this.formData.campus, // 所属校区, 类型为String
        configId: this.formData.configId, // 配置ID, 类型为Long
        mainSeats: this.formData.mainSeats, // 主座人数, 类型为Integer
        sideSeats: this.formData.sideSeats, // 从座人数, 类型为Integer
        microphones: 1, // 麦克风数量, 类型为Integer
        otherConfig: this.formData.otherConfig, // 其他配置, 类型为String
      }

      if (this.mode == false) {
        // 创建新会议室
        AddRoom(roomDetails)
          .then((response) => {
            if (response.code === 200) {
              this.$message.success('会议室添加成功')
              this.localValue = false
              $emit(this, 'dataUpdated')
              this.resetFormData()
            }
          })
      } else {
        // 更新现有会议室
        UpdateRoom(roomDetails)
          .then((response) => {
            if (response.code === 200) {
              this.$message.success('会议室信息已更新')
              this.localValue = false
              $emit(this, 'dataUpdated')
              this.resetFormData()
            }
          })
          .catch((error) => {
            console.error('保存更改失败:', error)
            this.$message.error('更新失败，网络或服务器错误')
          })
      }
    },
    handleDialogClose() {
      this.localValue = false
      this.resetFormData() // 添加一个方法来重置表单数据
    },
  },
  computed: {
    campusList() {
      return this.$store.getters.getCampusList
    },
  },
  emits: ['dataUpdated', 'update:value'],
}
</script>

<style lang="less" scoped>
@import '@/assets/style/EditMeetingRoom.less';
</style>
